<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户管理</title>

<link rel="stylesheet" href="./css/metro-all.css">
<link rel="stylesheet" href="./css/metro-colors.css">
<link rel="stylesheet" href="./css/metro-icons.css">
</head>
<body>
            <div class="row">
                <div class="cell">
                    <div> </div>
                </div>
                <div class="colspan-6">
<table id="userTable" class="table striped hovered dataTable border bordered">
                <thead>
                <tr>
                    <th class="text-left">id</th>
                    <th class="text-left">用户id</th>
					<th class="text-left">全名</th>
					<th class="text-left">类型</th>
					<th class="text-left">角色</th>
					<th class="text-left">操作</th>
                </tr>
                </thead>
                <tbody>
                </tbody>

</table>
                </div>
                <div class="cell">
                    <div> </div>
                </div>

            </div>
<br>
<hr>
<br>
            <div class="row">
                <div class="cell">
                    <div> </div>
                </div>
                <div class="colspan-6">
                <form id="addUser" action="addUser" method="post">
				
				

				
				<label>用户名</label>
				<input type="text" name="userid"> 

					
				<label>全名</label>
				<input type="text" name="fullname">
					
				<label>密码</label>
				<input type="text" name="pwd"> 
				
				<select id="sr" name="roleid">

				</select>
				 
				<input class="button primary" type="submit"
					value="提交">
				
				</form>
                   
                   
                   
                </div>
                <div class="cell">
                    <div> </div>
                </div>

            </div>
            <br>
<hr>
<br>
            <div class="row">
                <div class="cell">
                    <div> </div>
                </div>
                <div class="colspan-6">
                    
                </div>
                <div class="cell">
                    <div> </div>
                </div>

            </div>
<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/metro.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function(){
	var ubt1=$("#userTable").DataTable({
		"ajax":"listUser",
		"columns": [
			{ "data": "id" },
            { "data": "userid" },
            { "data": "fullname" },
            { "data": "type" },
            { "data": "roleid" },
            { "defaultContent": "<button class='button alert'>删除</button><button class='button warning'>修改</button>" },
           
        ]
	});
	
	$.get("getRole", {}, function(rs) {
		var r=$.parseJSON(rs);
		//console.log(r.rs[1]);
		
		for(i=0;i<r.rs.length;i++){
			str="<option value='"+r.rs[i].roleid+"'>";
			str+=r.rs[i].rolename+"</option>";
			$("#sr").append(str);
		}

	});
	$("#addUser").validate({
		rules:{
			userid:"required",
			pwd:"required"
		}
				
	});
	
	$("#userTable").on("click",".alert",function(){
		var id=$(this).parent().parent().children("td").get(1).innerHTML;
		//alert(id);
		
		$.get("deleteUser",{userid:id},function(rs){
			alert(rs);
			ubt1.ajax.reload();
		});

	});
});




</script>





</body>
</html>